<template>
  <canvas ref="canvas" width="40" height="40"></canvas>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      ctx: null,
    };
  },
  computed: {
    ...mapState({
      progress: (state) => state.player.progress,
    }),
  },
  methods: {
    // 背景圆环
    bgCircle() {
      let canvas = this.$refs.canvas;
      let ctx = canvas.getContext("2d");
      this.ctx=ctx
      let x = 40 / 2;
      let y = 40 / 2;
      ctx.beginPath();
      ctx.arc(x, y, 18, 0, Math.PI * 2);
      ctx.arc(x, y, 16, 0, Math.PI * 2);
      ctx.fillStyle = "rgba(212, 68, 57, 0.5)";
      ctx.fill("evenodd");
      ctx.closePath();
    },
    // 进度扇形
    progressCircle() {
      let canvas = this.$refs.canvas;
      let ctx = canvas.getContext("2d");
      let x = 40 / 2;
      let y = 40 / 2;
      ctx.beginPath();
      ctx.moveTo(x, y);
      ctx.arc(
        x,
        y,
        16,
        (Math.PI / 180) * -90,
        (Math.PI / 180) * (-90 + 360 * this.progress)
      );
      ctx.lineTo(x, y);
      ctx.fillStyle = "lightblue";
      ctx.fill();
      ctx.closePath();
    },
    // 进度圆环
    progressDot() {
      let canvas = this.$refs.canvas;
      let ctx = canvas.getContext("2d");
      let x = 40 / 2;
      let y = 40 / 2;
      ctx.beginPath();
      ctx.moveTo(x, y);
      ctx.arc(
        x,
        y,
        18,
        (Math.PI / 180) * -90,
        (Math.PI / 180) * (-90 + 360 * this.progress)
      );
      ctx.lineTo(x, y);
      ctx.moveTo(x, y);
      ctx.arc(
        x,
        y,
        16,
        (Math.PI / 180) * -90,
        (Math.PI / 180) * (-90 + 360 * this.progress)
      );
      ctx.lineTo(x, y);
      ctx.fillStyle = "#d44439";
      ctx.fill("evenodd");
      ctx.closePath();
    },
  },
  watch: {
    progress() {
      this.ctx.clearRect(0,0,40,40)
      this.bgCircle();
      this.progressCircle();
      this.progressDot();
    },
  },
  mounted() {
    this.bgCircle();
    this.progressCircle();
    this.progressDot();
  },
};
</script>

<style lang="scss" scoped>

</style>
